<template>
    <div class="person">
        <h3>3.reactive</h3>
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <h2>武器：{{ person.car.car1 }}、{{ person.car.car2 }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changecar1">修改car1</button>
        <button @click="changecar2">修改car2</button>
        <button @click="changeAll">修改car</button>
    </div>
</template>

<script lang="ts" setup name="Person"> 
    import {reactive,watch} from 'vue';
    let person = reactive({
        name: '真米酒',
        age: 19,
        car:{
            car1: '无尘剑',
            car2: '穿杨弓'
        }
    })
    function changeName(){
        person.name += '~';
    }
    function changeAge(){
        person.age += 1;
    }
    function changecar1(){
        person.car.car1 = '梨园伞'
    }
    function changecar2(){
        person.car.car2 = '扬风刀'
    }
    function changeAll(){
        person.car = {car1: '剑',car2: '大刀'} ; //person的地址只没有发生变化
    }
    // 监视某一个基本属性，必须用函数 返回值来实现。()=>person.name
    // watch(()=>person.name,(newValue,oldValue)=>{   
    //     console.log('person发生变化',newValue,oldValue);
    // },{immediate: true})

    //监视响应式对象中的某个属性，该属性是对象类型的，普通或函数式都行
    // ()=>person.car/person.car ,添加深度监视，不然整体替换无法监听到
    //非函数式的写法，不论添加 deep: true 与否，都无法监听到整体的替换
    watch(()=>person.car,(newValue,oldValue)=>{      
        console.log('person发生变化',newValue,oldValue);
    },{deep: true})

</script>

<style>
    .person{
        background-color: rgb(251, 95, 121);
        border-radius: 10px;
        /* height: 150px; */
        width: 300px;
        box-shadow: 0 0 10px;
    }
</style>